<template>
  <div>
    <div class="handle-box" style="margin: 20px 0">
      <el-date-picker type="date" v-model="startTime" value-format="YYYY-MM-DD" placeholder="起始日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-date-picker type="date" v-model="endTime" value-format="YYYY-MM-DD" placeholder="结束日期"
                      style="width: 200px;margin-right: 20px"></el-date-picker>
      <el-button type="primary" v-on:click="info()" style="margin-right: 30px"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="journalDate" label="日期"></el-table-column>
      <el-table-column prop="journalContent" label="内容"></el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination style="width:660px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "journal",
  created() {
    this.info()
  },
  data(){
    return{
      tableData: [],
      pageSize: 4,
      curPage: 1,
      total: 0,
      startTime: '',
      endTime: '',
    }
  },
  methods:{
    info() {
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        "startTime": this.startTime,
        "endTime": this.endTime,
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/journal/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
  }
}
</script>

<style scoped>

</style>